<template>
  <el-card>
    <router-link :to="link"><el-button type="primary">添加</el-button></router-link>
    <el-table
      v-loading.body="queryLoading"
      :data="items"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标题"/>
      <el-table-column
        prop="titlePicUrl"
        label="封面"
        width="200">
        <template slot-scope="scope">
          <img :src="version + '/uploadFile/path/' + scope.row.titlePicUrl" alt="cover" style="width: 200px" class="cover">
        </template>
      </el-table-column>
      <el-table-column
        prop="describes"
        label="内容">
        <template slot-scope="scope">
          <div>{{ scope.row.describes | filterHtml }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <!--<el-button type="text" size="small">查看</el-button>-->
          <router-link :to="'/home/banner/edit/' + scope.row.id"><el-button size="small" type="text" @click="editItem(scope.row)">编辑</el-button></router-link>
          <el-button size="small" type="text" @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="query.page" :page-size="query.size" :total="total" layout="prev, pager, next" @current-change="queryList" />
    </div>
  </el-card>
</template>

<script>
import axios from 'axios'
import { VERSION } from '@/constants/uri'
import { HOME_ITEM } from '@/constants/storage'
export default {
  props: {
    type: {
      type: Number,
      required: true
    },
    link: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      version: VERSION,
      queryLoading: false,
      items: [],
      total: 0,
      query: {
        page: 1,
        size: 10
      }
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList(page = 1) {
      this.query.page = page
      this.queryLoading = true
      axios.get(`/getMessageRelease/${this.type}/${this.query.page}/${this.query.size}`).then(res => {
        this.queryLoading = false
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    },
    editItem(row) {
      sessionStorage.setItem(HOME_ITEM, JSON.stringify(row))
    },
    deleteItem(id) {
      if (confirm('确定删除')) {
        axios.delete('/delMessageRelease/' + id).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.queryList()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
